

<template>
    <div class="login">
         面经注册
         <!-- <div class="username">
            <label>用户名<input type="text"  v-model="username"  placeholder="请输入用户名" class="inp-username"></label>
         </div>
         <div class="password">
            <label>密码 <input type="password" v-model="password"  placeholder="请输入密码" class="inp-password"></label>
         </div>
         <van-button type="primary" @click="register" size="large" v-loading="true">注册</van-button>
         <div class="switch">
              <span @click="$router.replace('/login')">有账号，去登录</span>
         </div> -->


         <van-form @submit="register">
            <van-field
              v-model="username"
              name="username"
              label="用户名"
              placeholder="用户名"
              :rules="[{ required: true, message: '请填写用户名' },{ pattern:/^\w{5,}$/, message: '用户名至少包含5个字符'}]"
              style="margin-top: 20px;"
            />
            <van-field
              v-model="password"
              type="password"
              name="password"
              label="密码"
              placeholder="密码"
              :rules="[{ required: true, message: '请填写密码' },{ pattern:/^\w{6,}$/,message: '密码至少包含6个字符'}]"
            />
            <div style="margin: 16px;">
              <van-button round block type="primary" native-type="submit">提交</van-button>
            </div>
          </van-form>
         <div class="switch">
              <span @click="$router.replace('/login')">有账号，去登录</span>
         </div> 
    </div>
</template>

<script>
import { registerApi } from '@/utils/api'
export default {
    name:'RegisterPage',
    data(){
        return{
            username:'',
            password:''
        }
    },
    methods:{
        async register(){
        //     if(this.username.trim().length<5){
        //     return 
        //   }
        // if(this.password.trim().length<6){
        //     return 
        // }
        // const res= await axios.post('http://interview-api-t.itheima.net/h5/user/register',{
        //     username:this.username,
        //     password:this.password
        const res=await registerApi({
          username:this.username,
          password:this.password
        }) 
         console.log(res)
         this.$router.replace('/login')
         this.$toast('注册成功')
        }
    }
}
</script>

<style  lang="less" scoped>
// 先完成功能 后补充样式
   .login{
      text-align: center;
      .username{
        margin-top: 40px;
        text-align: start;
        margin-left: 16px;
        label{
          color: #646566;
        }
        .inp-username{
          border: 1px solid transparent;
          outline: none;
          margin-left: 20px;
          
          &::placeholder{
            color: #999;
          }
        }
      }
      .password{
        margin-top: 40px;
        text-align: start;
        margin-left: 16px;
        label{
          color: #646566;
        }
        .inp-password{
          border: 1px solid transparent;
          outline: none;
          margin-left: 30px;
          &::placeholder{
            color: #999;
          }
        }
        
        
      }
      button{
        width: 340px;
        height: 44px;
        margin-top: 40px;
        color: white;
      }

      .switch{
        color:#006699;
        font-size: 12px;
        text-align: end;
        padding: 16px;
      }


   }

</style>